<script lang="ts" setup></script>
<template>
	<span>替换全局样式</span>

	<h1>基本组件</h1>
	<div class="flex">
		<van-button>Button 按钮 </van-button>
		<van-button>Cell 单元格</van-button>
		<van-button>ConfigProvider 全局配置</van-button>
		<van-button>Icon 图标</van-button>
		<van-button>Image 图片</van-button>
		<van-button>Layout 布局</van-button>
		<van-button>Popup 弹出层</van-button>
		<van-button>Space 间距</van-button>
		<van-button>Style 内置样式</van-button>
		<van-button>Toast 轻提示</van-button>
	</div>

	<h1>表单组件</h1>
	<div class="flex">
		<van-button>Calendar日历</van-button>
		<van-button>Cascader级联选择</van-button>
		<van-button>Checkbox 复选框</van-button>
		<van-button>DatePicker 日期选择</van-button>
		<van-button>Field 输入框</van-button>
		<van-button>Fom 表单</van-button>
		<van-button>Numberkeyboard 数字键盘 </van-button>
		<van-button> PasswordInput 密码输入框 </van-button>
		<van-button> Picker 选择器 </van-button>
		<van-button> PickerGroup 选择器组 </van-button>
		<van-button> Radio 单选框 </van-button>
		<van-button> Rate 评分 </van-button>
		<van-button> Search 搜索</van-button>
		<van-button> Slider 滑块 </van-button>
		<van-button> Signature 签名Stepper 步进器 </van-button>
		<van-button> Switch 开关 </van-button>
		<van-button>TimePicker 时间选择 </van-button>
		<van-button> Uploader文件上传 </van-button>
	</div>

	<h1>反馈组件</h1>
	<div class="flex">
		<van-button> ActionSheet 动作面板</van-button>
		<van-button> Barage 弹幕</van-button>
		<van-button> Dialog 弹出框</van-button>
		<van-button> DropdownMenu 下拉菜单</van-button>
		<van-button> FloatingPanel 浮动面板</van-button>
		<van-button> FloatingBubble 浮动气泡</van-button>
		<van-button> Loading 加载</van-button>
		<van-button> Notify 消息通知</van-button>
		<van-button> Overay 遮置层</van-button>
		<van-button> PulRefresh 下拉刷新</van-button>
		<van-button> ShareSheet分享面板</van-button>
		<van-button> SwipeCell 滑动单元格</van-button>
	</div>

	<h1>展示组件</h1>
	<div class="flex">
		<van-button> Badge 微标</van-button>
		<van-button> Circle 环形进度条</van-button>
		<van-button> Collapse 折叠面板</van-button>
		<van-button> CountDown 倒时</van-button>
		<van-button> Divider分割线</van-button>
		<van-button> Empty 空状态</van-button>
		<van-button> Highlight 高亮文本</van-button>
		<van-button> lmagePreview 图片预览</van-button>
		<van-button> Lazyload 懒加载</van-button>
		<van-button> List 列表</van-button>
		<van-button> NoticeBar 通知栏</van-button>
		<van-button> Popover气泡弹出框</van-button>
		<van-button> Progress 进度条</van-button>
		<van-button> RollingText 翻滚文本</van-button>
		<van-button> Skeleton 骨架屏</van-button>
		<van-button> Steps 步骡条</van-button>
		<van-button> Sticky 粘性布局</van-button>
		<van-button> Swipe 轮播</van-button>
		<van-button> Tag 标签</van-button>
		<van-button> TextEllipsis 文本省略</van-button>
		<van-button> Watemark 水印</van-button>
	</div>

	<h1>导航组件</h1>
	<div class="flex">
		<van-button> ActionBar动作栏</van-button>
		<van-button> BackTop 回到顶部</van-button>
		<van-button> Grid 宫格</van-button>
		<van-button> IndexBar 索引栏</van-button>
		<van-button> NavBar导航栏</van-button>
		<van-button> Pagination 分页</van-button>
		<van-button> Sidebar 侧边导航</van-button>
		<van-button> Tab 标签页</van-button>
		<van-button> Tabbar 标签栏</van-button>
		<van-button> TreeSelect 分类选择</van-button>
	</div>

	<h1>业务组件</h1>
	<div class="flex">
		<van-button> AddressEdit 地址编辑</van-button>
		<van-button> AddressList 地址列表</van-button>
		<van-button> Area 省市区选择</van-button>
		<van-button> Card 商品卡H</van-button>
		<van-button> ContactCard 联系人卡H</van-button>
		<van-button> ContactEdit联系人编辑</van-button>
		<van-button> ContactList 联系人列表</van-button>
		<van-button> Coupon 优惠券</van-button>
		<van-button> SubmitBar 提交订单栏</van-button>
	</div>

	<h1>组合式 Api</h1>
	<div class="flex">
		<van-button> 介绍</van-button>
		<van-button> useClickAway</van-button>
		<van-button> useCountDown</van-button>
		<van-button> useCustomFieldvalue</van-button>
		<van-button> useEventlistener</van-button>
		<van-button> usePageVisibility</van-button>
		<van-button> useRect</van-button>
		<van-button> useRelation</van-button>
		<van-button> useScrollParent</van-button>
		<van-button> useToggle</van-button>
		<van-button> useWindowSize</van-button>
		<van-button> useRaf</van-button>
	</div>
</template>
<style lang="scss" scoped> 
.flex {
	margin: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
</style>
